<template>
  <div class="hello">
    <!-- <input type="file" name="takephoto" id="qrcode" @change="decode">
    <div class="showpic">
      <img :src="img" alt="">
    </div> -->
    <qrcode-reader @decode="onDecode" @locate="onLocate" @init="onInit"></qrcode-reader>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      img: ""
    };
  },
  methods: {
    decode(event) {
      let vm = this;
      let input = event.target;
      let file = input.files[0];
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function(e) {
        let base64Code = this.result;
        //把得到的base64赋值到img标签显示
        vm.img = base64Code;
        vm.qr.callback = function() {
          alert("callback");
        };
        vm.qr.decode(base64Code);
      };
    },
    onDecode(content) {
      console.log("decode");
    },
    onLocate(points) {
      console.log("locate");
    },
    async onInit(promise) {
      // show loading indicator

      try {
        await promise;
        // successfully initialized
      } catch (error) {
        if (error.name === "NotAllowedError") {
          alert('用户不允许')
          // user denied camera access permisson
        } else if (error.name === "NotFoundError") {
          alert('no found camera')
          // no suitable camera device installed
        } else if (error.name === "NotSupportedError") {
          alert('需要https 或 localhost')
          // page is not served over HTTPS (or localhost)
        } else if (error.name === "NotReadableError") {
          alert('camera不可用')
          // maybe camera is already in use
        } else if (error.name === "OverconstrainedError") {
          alert('over constrained')
          // passed constraints don't match any camera. Did you requested the front camera although there is none?
        } else {
          alert('no support canvas')
          // browser is probably lacking features (WebRTC, Canvas)
        }
      } finally {
        // hide loading indicator
      }
    }
  }
};
</script>


<style scoped>
.showpic {
  border: 2px dashed #808284;
  width: 100px;
  height: 100px;
  margin: 20px auto;
}
img {
  width: 100%;
  height: 100%;
}
</style>

